<template>
  <div class="count-flop" :key="compKey" :style="{'--height': height+'px', '--bg': `url(${bg})`, '--fontFamily': fontFamily, '--fontSize': fontSize, '--color': color}">
    <div :class="!isNaN(parseFloat(item)) && isFinite(item)?'count-flop-box':'count-flop-point'" v-for="(item, index) in value" :key="index">
      <div v-if="!isNaN(parseFloat(item)) && isFinite(item)" class="count-flop-content" :class="['rolling_' + item]">
        <div v-for="(item2,index2) in numberList" :key="index2" class="count-flop-num">{{item2}}</div>
      </div>
      <div v-else-if="item=='-'" class="count-flop-content">-</div>
      <div v-else-if="item==','" class="count-flop-content">,</div>
      <div v-else class="count-flop-content">.</div>
    </div>
    <div v-if="suffix" class="count-flop-unit">{{suffix}}</div>
  </div>
</template>
<script>
  export default {
    name: 'countFlop',
    data () {
      return {
        value: [],
        numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        compKey: 0
      };
    },
    props: {
      val: {
        type: Number,
        require: true
      },
      height: {
        type: Number,
        default: 40
      },
      bg: {
        type: String,
        require: true
      },
      color: {
        type: String,
        default: '#AEFAFF'
      },
      fontSize: {
        type: Number,
        default: 28
      },
      fontFamily: {
        type: String,
        default: 'LCDBQ'
      },
      suffix: {
        type: String
      }
    },
    watch: {
      val () {
        this.value = this.paddingNum(this.val);
        // console.log(this.value);
        this.compKey += 1;
      }
    },
    mounted () {
      this.value = this.paddingNum(this.val);
      // console.log(this.value);
    },
    methods: {
      paddingNum(input){
        //判断是正数还是负数
        let flag = !!input;
        let val = Math.abs(input).toString().split(".");
        let left = val[0] ;
        let right = val[1]? val[1] : 0;
        let tmp = '';
        while(left.length>3){
          tmp = "," + left.slice(-3) + tmp;
          left = left.slice(0,left.length-3);
        }
        let tmp_r = !right ? '' : `.${right}`
        let res = flag ? left+tmp+tmp_r : "-"+left+tmp+tmp_r
        return res.split('')
      }
    }
  };
</script>
<style scoped lang="scss">
  $height: var(--height);
  $bg: var(--bg);
  $fontFamily: var(--fontFamily);
  $fontSize: var(--fontSize);
  $color: var(--color);
  .count-flop {
    display: flex; justify-content: center;
    height: $height;
    /* 可更改 */
    font-size: 30px;
    color: #4898f1;
    font-weight: bold;
    text-align: center;

  }

  .count-flop>div {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 100%;
  }

  .count-flop-box {
    /* 可更改 */
    width: 32px; margin: 0 3px;
    /*border: 1px solid rgba(72, 152, 241, 0.3);*/
    /*box-shadow: inset 0 0 0.6rem #69b1ff;*/
    /*border: 2px solid #66BEF4;*/
    background: $bg no-repeat center;
    &:before {
      content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; background-size: 100% 100%;
    }
  }

  .count-flop-point {
    /* 可更改 */
    width: 6px; height: $height;
    div { top:auto; bottom: 5px;}
  }

  .count-flop-content {
    font-family: $fontFamily;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    animation-fill-mode: forwards !important;
    .count-flop-num {
      height: $height; font-size: $fontSize; color: $color; text-align: center;
      display: flex; align-items: center; justify-content: center;
    }
  }

  .rolling_0 {
    animation: rolling_0 2.1s ease;
  }

  @keyframes rolling_0 {
    from {
      transform: translateY(-90%);
    }

    to {
      transform: translateY(0);
    }
  }

  .rolling_1 {
    animation: rolling_1 3s ease;
  }

  @keyframes rolling_1 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-10%);
    }
  }

  .rolling_2 {
    animation: rolling_2 2.1s ease;
  }

  @keyframes rolling_2 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-20%);
    }
  }

  .rolling_3 {
    animation: rolling_3 3s ease;
  }

  @keyframes rolling_3 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-30%);
    }
  }

  .rolling_4 {
    animation: rolling_4 2.1s ease;
  }

  @keyframes rolling_4 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-40%);
    }
  }

  .rolling_5 {
    animation: rolling_5 3s ease;
  }

  @keyframes rolling_5 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-50%);
    }
  }

  .rolling_6 {
    animation: rolling_6 2.1s ease;
  }

  @keyframes rolling_6 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-60%);
    }
  }

  .rolling_7 {
    animation: rolling_7 3.1s ease;
  }

  @keyframes rolling_7 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-70%);
    }
  }

  .rolling_8 {
    animation: rolling_8 2.1s ease;
  }

  @keyframes rolling_8 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-80%);
    }
  }

  .rolling_9 {
    animation: rolling_9 3.6s ease;
  }

  @keyframes rolling_9 {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-90%);
    }
  }
</style>

